<template>
  <div class="box">
    <div class="head"></div>
    <div class="body">
      <formEditor />
    </div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
</template>
<script setup lang="ts">
import formEditor from './formEditor/index.vue'
</script>
<style lang="less" scoped>
.box {
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-template-rows: 40px 1fr;
  grid-template-columns: 300px 1fr 300px;
  grid-template-areas: "head head head" "left body right";
}

.head {
  grid-area: head;
  background: #fff;
  border-bottom: 1px solid #ddd
}

.body {
  overflow: hidden;
  grid-area: body;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}

.left {
  grid-area: left;
  background: #fff;
  border-right: 1px solid #ddd;
  z-index: 100;
}

.right {
  grid-area: right;
  background: #fff;
  border-left: 1px solid #ddd;
  z-index: 100;
}
</style>